<template>
	<div :style="{ 'padding-top': statusbarHeight }">
		<van-nav-bar
			fixed
			:style="{ top: statusbarHeight }"
			:border="false"
			safe-area-inset-top
			title="地图"
			left-text="返回"
			right-text="确认"
			left-arrow
			z-index="99"
			@click-left="$emit('closeMap')"
			@click-right="confirm2"
		/>
		<div class="map-content">
			<el-amap-search-box
				class="search-box"
				:search-option="searchOption"
				:on-search-result="onSearchResult"
			/>
			<el-amap
				ref="map"
				vid="amapDemo"
				style="height: 100%"
				:center="center"
				:zoom="zoom"
				:plugin="plugin"
				class="amap-demo"
				:pitch-enable="false"
				:events="{ click: mapClick }"
			>
				<el-amap-marker
					v-for="marker in markers"
					:key="marker.orgCode"
					:ext-data="marker.extData"
					:position="marker.position"
					:vid="marker.orgCode"
					:clickable="true"
				/>
			</el-amap>
			<div class="dot2" @click="toCurrentPosition">
				<img src="../assets/images/dot2.png" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
import { NavBar } from 'vant';
export default {
	name: '',
	components: {
		'van-nav-bar':NavBar
	},
	props: {
		positionAddress: {
			type: String,
			default: ''
		},
		longitude: {
			type: [String, Number],
			default: ''
		},
		latitude: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		let self = this
		return {
			statusbarHeight: '',
			plugin: [
				{
					showButton: false,
					showMarker: true,
					showCircle: false,
					// zoomToAccuracy:true,
					pName: 'Geolocation',
					events: {
						init(o) {
							console.log(o)
							let mmp = document.querySelector('.dot2')
							mmp.addEventListener('click', function () {
								console.log(o)
								o.getCurrentPosition((status, result) => {
									console.log('点击后获取位置')
									if (result && result.position) {
										self.lng = result.position.lng
										self.lat = result.position.lat
										self.address = result.formattedAddress
										self.drawMarker(self.lng, self.lat)
										// self.center = [self.lng, self.lat];
										// self.loaded = true;
										// self.$nextTick();
									}
								})
							})
							// o 是高德地图定位插件实例
							o.getCurrentPosition((status, result) => {
								console.log('定位')
								console.log(status)
								console.log(result)
								if (status === 'complete' && result && result.position) {
									self.lng = result.position.lng
									self.lat = result.position.lat
									self.address = result.formattedAddress
									self.drawMarker(self.lng, self.lat)
									self.$emit('getPosition', true)
									// self.center = [self.lng, self.lat];
									// self.loaded = true;
									// self.$nextTick();
								} else {
									self.$emit('getPosition', true)
									self.$toast.fail('定位获取失败！')
								}
							})
						}
					}
				}
			],
			circles: [
				{
					center: [121.5273285, 31.21515044],
					radius: 20,
					fillOpacity: 0.9,
					events: {
						click: () => {
							console.log('click')
						}
					}
				}
			],
			searchOption: {
				city: '安徽',
				citylimit: false
			},
			center: [117.227267, 31.820567],
			markers: [],
			zoom: 16,
			geocoder: new AMap.Geocoder({
				radius: 1000,
				extensions: 'all'
			}),
			address: '',
			lat: '',
			lng: ''
		}
	},
	computed: {},
	watch: {},
	created() {
		this.statusbarHeight = localStorage.getItem('statusbarHeight') + 'px'
	},
	mounted() {
		let self = this
		setTimeout(() => {
			if (self.longitude && self.latitude && self.positionAddress) {
				self.center = [self.longitude, self.latitude]
				self.drawMarker(self.longitude, self.latitude)
			}
		}, 1000)
	},
	methods: {
		toCurrentPosition() {
			this.init()
		},
		// 绘制坐标点
		drawMarker(lng, lat) {
			const markers = []
			markers.push({
				position: [lng, lat],
				icon: ''
			})
			this.center = [lng, lat]
			this.markers = markers
			const _this = this
			this.geocoder.getAddress([lng, lat], function (status, result) {
				if (status === 'complete' && result.info === 'OK') {
					if (result && result.regeocode) {
						// _this.$emit('addressSelect', {
						// 	longitude: lng,
						// 	latitude: lat,
						// 	positionAddress: result.regeocode.formattedAddress
						// })
						_this.lat = lat
						_this.lng = lng
						console.log('地址22', result.regeocode.formattedAddress)
						_this.address = result.regeocode.formattedAddress
					}
				}
			})
		},
		// map点击拾取坐标
		mapClick(e) {
			this.drawMarker(e.lnglat.lng, e.lnglat.lat)
		},
		onSearchResult(pois) {
			const lat = pois[0].lat
			const lng = pois[0].lng
			this.center = [lng, lat]
			this.zoom = 16
			this.drawMarker(lng, lat)
		},
		// 确认选取
		confirm() {
			this.$emit('update:positionAddress', this.address)
			this.$emit('update:latitude', this.lat)
			this.$emit('update:longitude', this.lng)
			// this.$emit("close");
		},
		confirm2() {
			this.$emit('update:positionAddress', this.address)
			this.$emit('update:latitude', this.lat)
			this.$emit('update:longitude', this.lng)
			this.$emit('closeMap')
		},
		// 取消
		cancel() {
			// this.$emit("close");
		}
	}
}
</script>

<style scoped lang="less">
.map-content {
	height: calc(100vh - 40px);
	position: relative;
	width: 100%;
	margin: 0 auto;
	// .el-vue-search-box-container.search-box {
	//   position: absolute;
	//   left: 10px;
	//   top: 10px;
	// }
}
.dot2 {
	position: absolute;
	right: 20px;
	bottom: 40px;
	width: 70px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #cfcfcf;
	img {
		width: 40px;
	}
}
.search-box {
	position: absolute;
	left: 10px;
	top: 100px;
	width: 97%;
}
/deep/.amap-geolocation-con {
	// display: none;
}
/deep/ .search-btn {
	font-size: 32px;
	width: 130px !important;
}
/deep/ .search-tips ul li {
	font-size: 30px;
}
/deep/ .search-box-wrapper > input {
	padding-left: 60px;
}
/deep/ .search-box-wrapper::before {
	content: url('../assets/images/search.png');
	position: absolute;
	width: 20px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}
// /deep/ .van-nav-bar--fixed {
//   top: 40px;
// }
</style>
